<script setup lang="ts">
    import { ref, reactive } from 'vue'
    import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
    const parent = ref("Parent")
    const list = ref([{message: 'hello'}, { message: 'world'}]);

    const myObject = reactive({
        title: 'My Object',
        author: '<NAME>',
        publishedAt: '2016-04-10',
    })

    onBeforeRouteLeave(to => {
        console.log("before leave")
    })

    onBeforeRouteUpdate(to => {
        console.log("before update")
    })

    

</script>

<template>
    <div>
        <h1>List</h1>
        <ul>
            <li v-for="item of list">
                {{parent}}-{{ item.message}}
            </li>
        </ul>
    </div>

    <div>
        <h1>Object</h1>
        <ul>
            <li v-for="(value, key, index) in myObject">
                {{key}}: {{value}}-{{index }}
            </li>
        </ul>
    </div>

    <span v-for="n in 10">{{ n }}</span>
</template>

<style scoped>

</style>